<template>
  <div class="equipment-list flex flex-column">
    <antd-form-wrap :options="formOptions" class="flex-fixed" style="margin: 15px" @submit="formSubmit" />
    <common-table
      ref="tableRef"
      class="flex-auto-height"
      :fetch="getDataAsync"
      :fetch-params="paramsData"
      :columns="basicColumns"
      :show-toolbar="false"
      @vue:mounted="() => $refs.tableRef.load()"
    >
      <template #index="{ text, scope, index }">{{ index + 1 }}</template>
      <template #type="{ text }">{{ typeObj[text] }}</template>
      <template #action="{ text, scope }">
        <a-button type="link" @click="details(scope)">详情</a-button>
      </template>
    </common-table>
  </div>
</template>

<script>
import AntdFormWrap from '@gis/lib/components/antd-form/index.vue';
import RadioGroup from '@gis/lib/components/radio-button-group.vue';
import CommonTable from '@gis/lib/components/vex-table/index.vue';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { useDicDataStore } from '@gis/lib/pinia/dicData.js';
import { faceEntranceList } from '@gis/lib/api';
import { handleTableRes } from '@gis/lib/utils/resolver.js';
import { openEquipmentRlmjDetailsDialog } from './opt.js';

export default {
  name: 'equipment-rlmj-list',
  components: { AntdFormWrap, CommonTable, RadioGroup },
  props: {
    area_code: { type: String },
  },
  data() {
    return {
      filterValue: {},
      basicColumns: [
        {
          title: '小区名称',
          dataIndex: 'yard_name',
        },
        {
          title: '设备名称',
          dataIndex: 'name',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 80,
        },
      ],
    };
  },
  computed: {
    typeObj() {
      const dicDataStore = useDicDataStore();
      return dicDataStore.getDicData('D0114');
    },
    formOptions() {
      return [
        {
          component: 'a-input',
          field: 'door_name',
          colSpan: 6,
          wrapperCol: { span: 24 },
        },
      ];
    },
    apiParams() {
      const userInfoStore = useUserInfoStore();
      return { area_code: this.area_code ? this.area_code : userInfoStore.area_code };
    },
    paramsData() {
      return Object.assign({}, this.apiParams, this.filterValue);
    },
  },
  methods: {
    formSubmit(data) {
      this.filterValue = data;
      this.$nextTick(() => {
        this.$refs.tableRef.load();
      });
    },
    async getDataAsync(params) {
      if (!params || !params.area_code) return;
      return await handleTableRes(faceEntranceList, params);
    },
    details(data) {
      openEquipmentRlmjDetailsDialog(data);
    },
  },
};
</script>

<style scoped lang="less">
.equipment-list {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
}
</style>
